<!DOCTYPE html>
<html>
<head>
    <title>server_1</title>
</head>
<body>
    <h1>服务端跨域访问2：CORS 跨域请求示例</h1>
    <h2>
        当前路径：<span id="cururl"></span>
    </h2>
    <div id="result"></div>

    <button style="padding: 8px;margin: 10px;" onclick="sendSimpleRequest()">发送简单请求</button>
    <button style="padding: 8px;margin: 10px;" onclick="sendCheckRequest()">发送复杂请求</button>
    
    <script>
        document.getElementById('cururl').innerHTML = window.location.href;
        
        function sendSimpleRequest() {
            // 简单请求
            fetch('http://sub.websecurity.com/api/data', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                },
                credentials: 'include'  // 携带凭证（cookies）
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
        }

        function sendCheckRequest() {
            // 复杂请求（会触发预检请求）
            fetch('http://sub.websecurity.com/api/data', {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json',
                    'X-Custom-Header': 'value'
                },
                body: JSON.stringify({ 'data': 'put data' })
            })
            .then(response => response.json())
            .then(data => console.log(data))
            .catch(error => console.error('Error:', error));
        }
    </script>
</body>
</html>